<template>
  <div id="Aike-index">
    <div id="left">
      <el-row class="tac">
        <el-col>
          <div class="left-top">
            <div class="left-left">
              <img src="@/assets/LeftSidebar/octopus.png" alt="">
            </div>
            <div class="left-right">
              <span>AikeAi</span>
              <span>跨境引流系统</span>
            </div>
          </div>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#2E54EA"
            class="el-menu-vertical-demo"
            :default-active="this.$route.path"
            text-color="#fff"
            router
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="/aikeai/databoard">
              <el-icon><document /></el-icon>
              <span>数据看板</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/accountmanagement">
              <el-icon><document /></el-icon>
              <span>账号管理</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/materialmanagement">
              <el-icon><setting /></el-icon>
              <span>素材管理</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/chatmanagement">
              <el-icon><document /></el-icon>
              <span>聊天管理</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/createpublication">
              <el-icon><document /></el-icon>
              <span>创建发布</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/quickfollow">
              <el-icon><setting /></el-icon>
              <span>快速关注</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/likecomments">
              <el-icon><document /></el-icon>
              <span>点赞评论</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/groupmarketing">
              <el-icon><document /></el-icon>
              <span>群组营销</span>
            </el-menu-item>
            <el-menu-item index="/aikeai/taskmanagement">
              <el-icon><setting /></el-icon>
              <span>任务管理</span>
            </el-menu-item>
          </el-menu>
          <div class="left-bottom">
            <img src="@/assets/LeftSidebar/bottom.png" alt="">
          </div>
        </el-col>
      </el-row>
    </div>

    <div id="right">
      <div class="rigth-top">
        <!-- <template> -->
          <el-row :gutter="2">
            <el-col :span="2"><div class="grid-content bg-purple" />当前操作：</el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /><img src="@/assets/appImg/douyin.png" alt=""></el-col>
            <el-col :span="2"><div class="grid-content bg-purple" />TikTok</el-col>
            <el-col :span="3"><div class="grid-content bg-purple" />可用控数：100</el-col>
            <el-col :span="4"><div class="grid-content bg-purple" />开通日期：2021-08-28</el-col>
            <el-col :span="4"><div class="grid-content bg-purple" />有效日期：2021-08-28</el-col>
            <el-col :span="3"><div class="grid-content bg-purple" />版本号：V0.1.0</el-col>
            <el-col :span="2"><div class="grid-content bg-purple" /><img src="@/assets/appImg/octopus.png" alt=""></el-col>
            <el-col :span="2" class="text-content"><div class="grid-content bg-purple" />
              <div>测试账号</div>
              <div>666888999</div>
            </el-col>
            <el-col :span="1"><div class="grid-content bg-purple" />|</el-col>
            <el-col :span="1"><div class="grid-content bg-purple" /><el-icon><SwitchButton /></el-icon></el-col>
          </el-row>
        <!-- </template> -->
      </div>

      <div class="right-bottom">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body{
  margin: 0;
  padding: 0;
  background-color: #F0F0F0;
  overflow-x: hidden;
  overflow-y: hidden;
}

#Aike-index {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#Aike-index #left {
  width: 216px;
  background-color: #2E54EA;
  height: 100vh;
  overflow: hidden;
}

#Aike-index #left .left-top {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  background-color: #2E54EA;
  color: white;
  width: 185px;
  align-items: center;
  padding: 20px 20px 0 10px;
}

.left-left img {
  width: 70px;
  /* height: 50px; */
  height: 55px;
  background-color: #2E54EA;
}

.left-right {
  background-color: #2E54EA;
}

.left-right span {
  display: block;
  float:left;
  margin-left: 15px;
  background-color: #2E54EA;
}

.left-bottom img {
  background-color: #2E54EA;
  width: 216px;
  margin-left: -1px;
  margin-top: -160px;
}

.el-menu-vertical-demo {
  width: 217px;
  background-color: #2E54EA;
}

/**
  右边上面
*/

#Aike-index #right {
  width: 216px;
  /* background-color: #2E54EA; */
  flex-grow: 1;
}

.rigth-top {
  height: 54px;
  background: white;
  border-radius: 3px;
  font-size: 14px;
  /* width: 1124px; */
} 

.rigth-top .el-col:nth-child(1){
  margin-left: 20px;
  margin-top: -25px;
} 

.rigth-top .el-col:nth-child(2) img{
  width: 24.45px;
  height: 24.45px;
  border-radius: 3px;
  margin-left: -3.5rem;
} 

.rigth-top .el-col:nth-child(3) {
  margin-left: -4rem;
} 

.rigth-top .el-col:nth-child(4) {
  margin-left: 13.5rem;
  margin-right: -2.5rem;
} 

.rigth-top .el-col:nth-child(5) {
  margin-right: -2.5rem;
} 

.rigth-top .el-col:nth-child(6) {
  margin-right: -2.5rem;
} 

.rigth-top .el-col:nth-child(7) {
  margin-right: -4.5rem;
} 

.rigth-top .el-col:nth-child(8) img{

  width: 34.7px;
  height: 34.7px;
  margin-right: -4.5rem;
} 

.rigth-top .el-col:nth-child(9) {
  margin-right: -1.5rem;
} 

.rigth-top .el-col:nth-child(10) {
  margin-right: -1.5rem;
  margin-top: -30px;
} 

.rigth-top .el-col:nth-child(11) {
  margin-right: -1.5rem;
} 

.el-row {
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: nowrap;
}

[class*=el-col-].is-guttered {
  margin-top: -25px;
}

.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.text-content {
  text-align: left;
  margin-left: 16px;
}

</style>